<template>
    <div>
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white">
            <template>
                <el-tabs v-model="activeName2" type="card" >
                    <el-tab-pane label="维修主控台" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="工单列表" name="second">
                        <el-row>
                            <el-col :span="7">
                                <div style="height: 540px;border-right: 2px solid #E4E7ED">
                                    <span>岗位结构</span>
                                    <el-input placeholder="岗位名称" v-model="myrolenameinput" style="margin-left: 20px;width: 230px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" ></i>
                                    </el-input>
                                    <el-tree v-if="roleflag" style="margin-top: 20px"
                                             @node-click="myrolechangetime"
                                             :data="mydepdata" default-expand-all :filter-node-method="filterNode" ref="deptree"
                                             :expand-on-click-node="false"
                                    >
                                     <span class="custom-tree-node"  slot-scope="s">
                                        <span>{{ s.data.label }}</span>
                                    </span>
                                    </el-tree>
                                </div>
                            </el-col>
                            <el-col :span="17">
                                <div style="height: 540px">
                                    <el-row>
                                        <el-col :span="10">
                                            <span style="margin-left: 20px">{{myrolename}}</span>
                                            <el-input placeholder="员工名称" @blur="selectAllEmp" v-model="myempnameinput" style="margin-left: 20px;width: 230px;">
                                                <i slot="suffix" @click="selectAllEmp()" class="el-input__icon el-icon-search" ></i>
                                            </el-input>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-button style="margin-left: 20px" size="small" type="primary" @click="addempshowview">切换查看目标</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-table v-show="qiehuanyg"
                                              :data="emptabledata"
                                              style="width: 96%;margin: 0 auto;margin-top: 20px">
                                        <el-table-column
                                                align="center"
                                                prop="empName"
                                                label="员工姓名">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="depId.depName"
                                                label="部门">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="roleId.roleName"
                                                label="岗位">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="入职日期">
                                            <template slot-scope="s">
                                                {{s.row.empSettime | formatDate}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="empService"
                                                label="启用状态">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="empStatu"
                                                label="在职状态">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="操作">
                                            <template>
                                                <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                <i style="font-size:18px;color: #409EFF" class="el-icon-edit"></i>
                                                <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"></i>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-table v-show="qiehuanbm"
                                              :data="emptabledata"
                                              style="width: 96%;margin: 0 auto;margin-top: 20px">
                                        <el-table-column
                                                align="center"
                                                prop="empName"
                                                label="员工姓名11">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="depId.depName"
                                                label="部门">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="roleId.roleName"
                                                label="岗位">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="入职日期">
                                            <template slot-scope="s">
                                                {{s.row.empSettime | formatDate}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="empService"
                                                label="启用状态">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                prop="empStatu"
                                                label="在职状态">
                                        </el-table-column>
                                        <el-table-column
                                                align="center"
                                                label="操作">
                                            <template>
                                                <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                                <i style="font-size:18px;color: #409EFF" class="el-icon-edit"></i>
                                                <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"></i>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </div>

</template>
<script>
    import {formatTimeToStr} from '../router//format.js'
    import cities from "../router/cities";
    export default {
        name: "Djurisdiction",
        inject: ['reload'], // 引入方法
        data() {
            return {
                activeName2:'first',
                qiehuanyg:false,
                qiehuanbm:true,
                myempdepoptions:[],//部门联级选择器
                defaultParams:{
                    value:'value',
                    label:'label',
                    depUpid:'depUpid',
                    children:'children'
                },

                empfrom:{
                    empId:0,
                    empName:'',
                    empGender:'',
                    empPhone:'',
                    empAdd:'',
                    empAddnum:'',
                    empDeadd:'',
                    empSfz:'',
                    empService:'',
                    depId:{
                        depId:0,
                        depName:'',
                    },
                    roleId:{
                        roleId:0,
                        roleName:''
                    }
                },//员工表单

                options: cities,
                sex:'',
                addempshow:false,//新建员工弹框
                myempnameinput:'',//员工名称/岗位名称搜索
                myrolenameinput:'',//岗位结构名称搜索
                myrolename:'所有',//选中的角色名
                myempstatu:false,//是否查询离职的
                myempservice:false,//是否查询停用的
                emptabledata:[],//员工表格
                savemyroleId:'',//保存点击的角色ID
                savemyempId:'',//保存搜索的员工ID

                rolenameinput:'',//岗位名称搜索
                depnameinput:'',//部门名称搜索

                flagselect:true,
                roleflag:false,

                rolesidarr:[],
                depIdsoptions:[],
                rolesoptions:[],//上级岗位
                addrolesshow:false,//岗位弹框设置
                myrolefrom:{
                    roleUpid:0,//上级岗位
                    roleName:'',//岗位名称
                    roleRemark:'',//岗位描述
                    depId:{
                        depId:0,
                        depName:''
                    }
                },//岗位表单

                liro:'',//列表权限选中
                listroles:[],//列表权限
                myroleId:0,//保存我的职位ID
                checkAll:false,//全选职位权限
                isIndeterminate:false,//全选职位权限
                myactiveName:'',//岗位标签页
                myselectallroles:[],//查询出该岗位已有的权限组
                mycheckedarr:[],//我选择的权限
                stationJurisdiction:false,//岗位授权

                mydepfrom:{
                    depId:0,
                    depName:'',
                    upDep:{
                        depId:0,
                        depName:'',
                    },
                    depRemark:'',
                },//部门表单

                ismydepId:0,//保存需要授权部门的ID
                JurisdictionGroup:[],//部门所有权限组
                myroledata:[],//所有岗位管理
                deptJurisdiction:false,
                checkedGroup:[],//部门已有权限
                depoptions:[],//上级部门
                adddetshow:false,
                activeName: 'first',
                mydepdata: [],//所有部门管理

            };
        },

        methods: {

            myempdepchange(e, form, thsAreaCode){
                this.print(e, form, thsAreaCode);
            },
            /*点开新增员工弹框*/
            addempshowview(){
                this.qiehuanyg=!this.qiehuanyg;
                this.qiehuanbm=!this.qiehuanbm;
            },

            /*当角色结构点击时*/
            myrolechangetime(item){
                this.print(item);
                this.savemyroleId = item.value;//保存我选择的角色ID
                this.myrolename = item.label;//保存我选择的角色名称
                this.selectAllEmp();
            },

            /*复选框改变事件*/
            mychangerole(item){
                this.print(item);
                //this.flagselect = item;//该权限选中时显示
            },

            /*关闭岗位弹框*/
            roleshandleDialogClose(){
                this.reload(); // 调用方法
            },

            /*是否可以删除岗位*/
            detrole(roleId){
                this.$axios.post("http://localhost:8088/roles//myisnomyroles",this.qs.stringify(
                    {roleId:roleId}
                )).then(v=> {
                    if(v.data==0){
                        this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '该岗位已有员工!'
                        });
                    }
                }).catch(()=>{

                });
            },

            /*新建岗位*/
            savemynewroles(){
                this.print(this.myrolefrom)
                this.$axios.post("http://localhost:8088/roles/savemynewroles",this.myrolefrom).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });

                    this.addrolesshow=false;
                    this.myrolefrom={
                        roleUpid:0,//上级岗位
                        roleName:'',//岗位名称
                        roleRemark:'',//岗位描述
                    };//岗位表单
                    this.initmyalldep();
                }).catch(()=>{

                })

            },

            /*打开新建岗位弹框*/
            addrole(item){
                var my = {
                    roleId:0,
                    roleName:''
                }
                my.roleId =item.value;
                my.roleName = item.label;
                this.rolesoptions[0] = my;
                this.myrolefrom.roleUpid = item.value;
                this.depIdsoptions[0] = item.depId;
                this.myrolefrom.depId = item.depId;
                this.addrolesshow = true;
            },

            myval(myroleId){
                return this.rolesidarr.indexOf(myroleId)!=-1
            },

            /*去重数组*/
            unique(arr) {
                arr = arr.reverse();//倒序排列
                const res = new Map();
                return arr.filter((arr) => !res.has(arr.tid) && res.set(arr.tid, 1));
            },


            /*判断权限名是否包含列表两个字*/
            //Es6之字符串处理
            myyanz(a){
                return a.includes('列表');
            },

            handleCheckAllChange(val) {
                this.mycheckedarr = val ? this.myselectallroles : [];
                this.isIndeterminate = false;
            },

            /*岗位授权*/
            savemyroles(){
                /* var ischeckedarr=[];
                 var a = {};
                 this.mycheckedarr.forEach(v=>{
                     this.$set(a,'roleId',this.myroleId)
                     this.$set(a,'meId',v.tid)
                     this.$set(a,'liro',v.liro)

                     ischeckedarr.push(a);
                 });//之前用的VO类查出来的，现在转换*/

                this.mycheckedarr = this.unique(this.mycheckedarr);
                this.print(this.mycheckedarr);
                var rolesarr = JSON.stringify({roleId:this.myroleId,mycheckedarr:this.mycheckedarr});
                this.$axios.post("http://localhost:8088/roles/saverolesarr",this.qs.stringify(
                    {rolesarr:rolesarr}
                )).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '授权成功!'
                    });
                    this.stationJurisdiction=false;//关闭岗位授权弹框
                    this.mycheckedarr = [];
                    this.reload(); // 调用方法
                    //this.initmyalldep();
                    //location.reload();
                })
            },

            /*查询该岗位的部门权限*/
            setstation(roleId){
                this.mycheckedarr = [];
                this.myroleId = roleId;
                this.print(roleId);
                this.$axios.post("http://localhost:8088/roles/selectmyroles",this.qs.stringify(
                    {roleId:roleId}
                )).then(v=>{
                    /*该职位已有的权限*/
                    v.data.myallroles.forEach(k=>{
                        this.mycheckedarr.push(k);//查询出已有的权限并赋值
                        this.rolesidarr.push(k.tid);
                    });
                    this.print(v.data);
                    this.print("我是角色已有的权限");
                    this.print(this.mycheckedarr);
                    this.myselectallroles = v.data.mydeproles;//该职位的部门权限

                    this.myactiveName =this.myselectallroles[0].menusName;
                    this.listroles= v.data.listroles;//列表权限
                    this.stationJurisdiction=true
                })
            },
            /*删除部门判断*/
            detdep(depId){
                this.print(depId);
                this.$axios.post("http://localhost:8088/myjurisdiction/verifyisempty",this.qs.stringify(
                    {depId:depId}
                )).then(v=> {
                    this.print(v.data);
                    if(v.data==0){
                        this.initmyalldep();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else if(v.data==1){
                        this.$message({
                            type: 'warning',
                            message: '请先删除下级部门!'
                        });
                    }else if(v.data==2){
                        this.$message({
                            type: 'warning',
                            message: '请先删除部门员工!'
                        });
                    }
                }).catch(()=>{

                })
            },

            /*确认添加部门*/
            savemydep(){
                this.print(this.mydepfrom);
                this.$axios.post("http://localhost:8088/myjurisdiction/savemydep",this.mydepfrom).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });

                    this.adddetshow=false;
                    this.initmyalldep();
                    this.mydepfrom={
                        depId:0,
                        depName:'',
                        upDep:{
                            depId:0,
                            depName:'',
                        },
                        depRemark:'',
                    };//部门表单
                }).catch(()=>{

                })
            },

            /*打开新建下级部门*/
            adddet(item){
                this.adddetshow=true;
                var my = {
                    depId:0,
                    depName:''
                }
                my.depId =item.value;
                my.depName = item.label;
                this.depoptions[0] = my;
                this.mydepfrom.upDep = my;
            },

            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleNodeClick(data) {
                console.log(data);
            },
            /*初始化数据*/
            async initmyalldep(){
                await this.$axios.post("http://localhost:8088/myjurisdiction/selectmyalldep").then(v=> {
                    if(v.data.mydepqx[0].label=='总公司'){
                        this.$set(v.data.mydepqx[0],'isshow',true);
                    }
                    this.forjudgedep(v.data.mydepqx[0].children);
                    this.mydepdata = v.data.mydepqx;
                    this.myempdepoptions = this.getTreeData(v.data.mydepqx);//部门级联选择器
                    this.print("我是部门树型");
                    this.print(v.data.mydepqx);


                    this.myroledata = v.data.myroleqx;
                    this.print("我是岗位树型");
                    this.print(v.data.myroleqx);


                    this.JurisdictionGroup = v.data.myallrole;
                    this.print("我是所有菜单权限");
                    this.print(v.data.myallrole);
                }).catch(()=>{

                })
                this.selectAllEmp();

                this.roleflag = true;
            },

            // 递归判断列表，把最后的children设为undefined
            getTreeData(data){
                // 循环遍历json数据
                this.print("wolail");
                this.print(data);
                for(var i=0;i<data.length;i++){
                    if(data[i].children.length===0){
                        // children若为空数组，则将children设为undefined
                        data[i].children=undefined;
                    }else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },

            /*查询员工*/
            selectAllEmp(){
                this.$axios.post("http://localhost:8088/myemp/selectmyemp",this.qs.stringify(
                    {roleId:this.savemyroleId,empId:this.savemyempId,
                        myempnameinput:this.myempnameinput,
                        myempservice:this.myempservice,
                        myempstatu:this.myempstatu,
                    }
                )).then(v=> {
                    this.emptabledata = v.data;
                    this.print(v.data);
                }).catch(()=>{

                })
            },

            /*循环判断是否有下级部门*/
            forjudgedep(item){
                item.forEach(k=>{
                    if(k.children.length>0){
                        this.$set(k,'isshow',false);
                        this.forjudgedep(k.children);
                    }else{
                        this.$set(k,'isshow',true);
                    }
                })

            },
            //树状图
            filterNode(value, data) {
                this.print("我在这");
                this.print(value);
                this.print(data);
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },// 获取省市区地址级联

        },
        created() {
            this.initmyalldep();
        },
        watch: {
            depnameinput(val) {
                this.$refs.deptree.filter(val);
            },
            rolenameinput(val) {
                this.$refs.roletree.filter(val);
            },
            myrolenameinput(val) {
                this.$refs.myroletree.filter(val);
            },

        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            },
        }

    }
</script>
<style scoped>

    .addview:hover{
        color: white;
    }
    a{
        text-decoration: none;
        color: #409EFF;
    }
    a:hover{
        color: white;
    }
    .busin:hover{
        color: #3E84E9;
        cursor:pointer;
    }
    .businame{
        color: #606266;
    }
    .businame:hover{
        color: #409EFF;
        cursor:pointer;
    }
    .operate{
        font-size: 12px;
        height: 40px;
        padding: 0 20px;
        color: #777;
        background: white;
    }
    .selected—title{
        margin-top: 15px;
        margin-left: -6px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
    }
    .selected—title1{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title1 span{
        margin-left: 24px;
    }
    .selected—title1 span:hover{
        color:#409eff;
    }
    .selected—title2{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 129px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title2 span{
        margin-left: 24px;
    }
    .selected—title2 span:hover{
        color:#409eff;
    }
</style>